import '../base.scss'
import { useState, useEffect } from 'react'
import ListItem from './ListItem'
import { addTodo } from '../store/action'
const List = ({ store }) => {
    const [value, setValue] = useState('')
    // const [todos, setTodos] = useState([])
    const addItem = () => {
        if (value.trim() === '') return
        // store本质上是一个对象，对象中有一个dispatch方法，可以用来发送action
        store.dispatch(addTodo(value))
        setValue('')
    }

    // useEffect(() => {
    //     console.log(store.getState().todos,'----------------------');
    //     setTodos(store.getState().todos)
    // }, [store])
    const todos = store.getState().todos;

    return (
        <div className="List">
            <h3>代办事项</h3>
            <div className='d-flex'>
                <input type="text"
                    className="form-control"
                    placeholder="请输入待办事项"
                    value={value}
                    onChange={(e) => setValue(e.target.value)}
                    style={{
                        marginRight: 10,
                        width: "80%"
                    }} />
                <button className='btn btn-primary' onClick={addItem}>添加</button>
            </div>


            <ul className='list-group' style={{ width: "80%", marginTop: 10 }}>
                {
                    todos.map((todo, index) => <ListItem key={index} todo={todo} store={store} />)
                }

            </ul>


        </div>)
}

export default List
